<template>
	<!-- 引用 MkBillList 组件，并使用 ref 引用该组件实例 -->
	<MkBillList ref='drawerRef'>
		<!-- 定义一个查询容器组件 -->
		<MkQueryContainer>
			<!-- 定义查询容器的头部模板 -->
			<template #header="">
				<!-- 定义一个表单组件，用于输入查询条件，采用内联布局 -->
				<MkForm ref="queryForm" :model="searchParam" :inline="true">
					<!-- 定义一个输入框，用于输入关键字，按下回车键触发搜索 -->
					<MkInput label="关键字" @keyup.enter.native="search" v-model="searchParam.keyword" clearable="" />
					<!-- 定义一个表单项，包含一个查询按钮 -->
					<el-form-item>
						<!-- 定义一个查询按钮，点击触发搜索 -->
						<MkButtonQuery @click="search" />
					</el-form-item>
				</MkForm>
			</template>
			<!-- 定义一个表格组件，用于展示查询结果，加载时显示加载状态，双击行触发编辑事件 -->
			<MkTable :data="tableData" v-loading="loading" @row-dblclick="edit">
				<MkColumnIndex />
				<MkColumn prop="id" label="单据号" />
				<MkColumn prop="danJuLeiXing" label="单据类型" />
				<MkColumn prop="danJuZhuangTai" label="单据状态" />
				<MkColumn prop="xueYeLaiYuanId" label="血液来源" />
				<MkColumn prop="laiYuanDanHao" label="来源单号" />
				<MkColumn prop="ruKuYuanQuId" label="入库院区" />
				<MkColumn prop="remark" label="备注" />
				<MkColumnOption @show="edit" :isMore="false" />
			</MkTable>
			<!-- 定义一个分页组件，用于分页查询结果，页码和每页数量变化时触发搜索 -->
			<MkPagination v-model:page="searchParam.page" v-model:pageSize="searchParam.pageSize" :total="total"
				@query="search" />
		</MkQueryContainer>
	</MkBillList>
</template>

<script lang='ts' setup>
// 导入临床发血单相关的 API 和输出类型
import { TraFaXueApi, TraFaXueOutput } from '/@/api/tra/TraFaXue';
// 导入分页查询的自定义钩子
import { usePageQuery } from '/@/hooks/usePageQuery';
// 导入自定义工具函数
import { clog, showSuccess } from '/@/utils';
// 定义组件的自定义事件，用于跳转至详情页，带出数据
const emit = defineEmits(['load'])
// 定义一个引用，用于操作 MkBillList 组件实例
const drawerRef = ref();
const { searchParam, total, tableData, loading, search } = usePageQuery<TraFaXueOutput>(TraFaXueApi.page);

// 定义表格行双击或操作列点击时的编辑函数
const edit = (row: any) => {
	// 关闭 MkBillList 组件
	drawerRef.value?.close();
	// 触发自定义事件，传递当前行数据
	emit('load', row);
};

// 定义打开 MkBillList 组件的方法
const open = async () => {
	// 显示 MkBillList 组件
	drawerRef.value.show();
};
/**
 * 暴露
 */
defineExpose({ open })

</script>

<style lang='scss' scoped></style>